<template>
  <div
    class="container"
    style="height: 300px; overflow-y: auto"
    @scroll="onScroll"
  >
    <div class="scroll" :style="{ height: arr.length * 30 + 'px' }">
      <div
        class="placeholder"
        :style="{ height: currentIndex * 30 + 'px' }"
      ></div>
      <div
        class="item"
        v-for="(item, index) in displayArr"
        :key="item"
        :style="{ height: '30px' }"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
// 假如每一行固定高度为 30px
// 获取列表长度
// 根据列表长度 列表的实际高度 获取滚动条滚动的距离 公式 : 列表长度*高度30px
// 要给父标签 (table) 设置固定高度 公式 : (显示的列表长度 + 表头) * 高度
// (10 + 1) * 30
// 给我们的显示列表头部和尾部添加占位空间标签

export default {
  data() {
    return {
      currentIndex: 0,
    };
  },
  computed: {
    displayArr() {
      return this.arr.slice(this.currentIndex, this.currentIndex + 10);
    },
  },
  created() {
    // 初始化一个数组 arr，是 1-1000 的数字
    this.arr = Array.from({ length: 1000 }, (_, k) => k + 1);
  },
  methods: {
    onScroll(e) {
      const scrollTop = e.target.scrollTop; // 滚动条滚动的距离
      this.currentIndex = Math.floor(scrollTop / 30); // 计算当前滚动到第几个元素
    },
  },
};
</script>
